import useGetComponentInfo from "@/hooks/useGetComponentInfo";
import {
  changeComponentHidden,
  changeSelectId,
  toggleComponentLocked,
  changeComponentTitle,
  moveComponent,
} from "@/store/componentReducer";
import { cn } from "@/utils/core-uitls";
import { EyeInvisibleFilled, LockFilled } from "@ant-design/icons";
import { Button, Input, message } from "antd";
import { FC, useState } from "react";
import { useDispatch } from "react-redux";

import SortableContainer from "@/components/DragSortable/SortableContainer";
import SortableItem from "@/components/DragSortable/SortableItem";

const Layers: FC = () => {
  const { componentList, selectId } = useGetComponentInfo();

  const dispatch = useDispatch();

  const [changeTitle, setChangeTitle] = useState("");

  //点击选中组件
  function handleClick(id: string) {
    const curComp = componentList.find((c) => c.fe_id === id);
    if (curComp && curComp.isHidden) {
      message.info("不能选中隐藏的组件");
      return;
    }

    if (id !== selectId) {
      dispatch(changeSelectId(id));
      setChangeTitle("");
      return;
    }
    setChangeTitle(id);
  }
  function handleHide(event: React.MouseEvent, id: string, isHidden: boolean) {
    event.stopPropagation();
    event.preventDefault();
    dispatch(changeComponentHidden({ fe_id: id, isHidden: !isHidden }));
    if (!isHidden) {
      dispatch(changeSelectId(""));
    }
  }
  function handleLock(event: React.MouseEvent, id: string) {
    event.stopPropagation();

    dispatch(toggleComponentLocked({ fe_id: id }));
  }
  //切换输入框标题
  function handleChangeTitle(event: React.ChangeEvent<HTMLInputElement>) {
    const newTitle = event.target.value;
    if (!newTitle) return;
    if (!changeTitle) return;
    dispatch(changeComponentTitle({ title: newTitle }));
  }

  function handleDragEnd(oldIndex: number, newIndex: number) {
    // console.log(oldIndex, newIndex, "oldIndex, newIndex");
    dispatch(moveComponent({ oldIndex, newIndex }));
  }

  const items = componentList.map((c) => ({ id: c.fe_id, ...c }));
  return (
    <SortableContainer items={items} handleDragEnd={handleDragEnd}>
      {/* <ControlledExample /> */}
      {componentList.map((c) => {
        return (
          <SortableItem key={c.fe_id} id={c.fe_id}>
            <div
              onClick={() => handleClick(c.fe_id)}
              className="cursor-pointer"
            >
              <div
                className={cn(
                  "flex items-center justify-between p-3 py-2 border-b-1 border-gray-100 hover:bg-gray-100",
                  selectId === c.fe_id
                    ? "!border-[#188fff5e] border-1 rounded-md  text-blue-500"
                    : ""
                )}
              >
                <span>
                  {changeTitle !== c.fe_id && c.title}
                  {changeTitle === c.fe_id && (
                    <Input
                      value={c.title}
                      onChange={(e) => handleChangeTitle(e)}
                      onBlur={() => setChangeTitle("")}
                      onPressEnter={() => setChangeTitle("")}
                    />
                  )}
                </span>
                <div className="flex items-center gap-1 opacity-60">
                  <Button
                    shape={"circle"}
                    icon={<EyeInvisibleFilled></EyeInvisibleFilled>}
                    onClick={(e) => handleHide(e, c.fe_id, c.isHidden || false)}
                    type={c.isHidden ? "primary" : "default"}
                  ></Button>
                  <Button
                    shape={"circle"}
                    icon={<LockFilled></LockFilled>}
                    onClick={(e) => handleLock(e, c.fe_id)}
                    type={c.isLocked ? "primary" : "default"}
                  ></Button>
                </div>
              </div>
            </div>
          </SortableItem>
        );
      })}
    </SortableContainer>
  );
};

export default Layers;
